<template>
  <div>
    <!-- 主城区 -->
    <div class="body" v-show="popup">
      <div class="firstDiv">
        <div class="firstTitle">数据完成度</div>
        <div class="close" @click="close">X</div>
      </div>
      <div class="secondDiv">
        <div class="one">
          <div class="one-1 cityFont">类目</div>
          <div class="one-2 cityFont">主城区(城投)</div>
          <div class="one-3 cityFont">滨江区</div>
          <div class="one-3 cityFont">钱塘区</div>
          <div class="one-3 cityFont">萧山区</div>
          <div class="one-3 cityFont">临平区</div>
          <div class="one-3 cityFont">余杭区</div>
          <div class="one-3 cityFont">富阳区</div>
          <div class="one-3 cityFont">临安区</div>
          <div class="one-3 cityFont">建德市</div>
          <div class="one-3 cityFont">桐庐县</div>
          <div class="one-3 cityFont">淳安县</div>
        </div>
        <div class="two">
          <div class="one-1 cityFont" style="color: #00CEFF">总计</div>
          <div class="one-2 cityFont" style="color: #00CEFF">10/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">4/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">5/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">15/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">1/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">9/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">8/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">11/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">11/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">11/15</div>
          <div class="one-3 cityFont" style="color: #00CEFF">12/15</div>
        </div>
        <!-- 气泡显示区 -->
        <div class="third">
          <div class="one-4 cityFont">燃气用户登记信息</div>
          <div style="margin-left:125px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="green" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
          </div>
        </div>
        <div class="four">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            钢瓶档案信息
          </div>
          <div style="margin-left:174px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:34px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:160px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            燃气用户订单及配送信息
          </div>
          <div style="margin-left:104px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:200px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            燃气入户安检信息
          </div>
          <div style="margin-left:145px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="green" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:34px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:240px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            气瓶充前检查记录
          </div>
          <div style="margin-left:145px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="green" style="margin-left:55px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:34px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:280px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            气瓶充后记录
          </div>
          <div style="margin-left:173px; margin-top:12px; display:flex">
            <div class="red"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:34px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:320px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            气瓶充装记录
          </div>
          <div style="margin-left:173px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="green" style="margin-left:55px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:34px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:360px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            车辆信息
          </div>
          <div style="margin-left:202px; margin-top:12px; display:flex">
            <div class="red"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:33px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:400px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            车辆轨迹
          </div>
          <div style="margin-left:202px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:33px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:440px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            车辆运输气瓶记录
          </div>
          <div style="margin-left:147px; margin-top:12px; display:flex">
            <div class="red"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:31px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:480px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            配送、运输、充气员工信息
          </div>
          <div style="margin-left:91px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:31px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:520px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            送检记录表
          </div>
          <div style="margin-left:189px; margin-top:12px; display:flex">
            <div class="red"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:31px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:560px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            预警信息表
          </div>
          <div style="margin-left:189px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:600px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            预警处置过程记录
          </div>
          <div style="margin-left:147px; margin-top:12px; display:flex">
            <div class="red"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="red" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="red" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
          </div>
        </div>
        <div class="four" style="margin-top:640px">
          <div class="cityFont" style="margin-left:30px; margin-top:10px">
            组织表
          </div>
          <div style="margin-left:217px; margin-top:12px; display:flex">
            <div class="green"></div>
            <div class="red" style="margin-left:55px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="green" style="margin-left:35px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:33px"></div>
            <div class="red" style="margin-left:33px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
            <div class="green" style="margin-left:32px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: { popup:Boolean},
  data() {
    return {

    };
  },
  methods: {
    close(){
      this.$parent.closed()
    }
  },
};
</script>
<style lang="less" scoped>
.body {
  width: 1200px;
  height: 764px;
  margin-left: -150px;
  /* transform: scaleY(-1); */
  background-image: radial-gradient(
    circle at 50% 84%,
    #005488 0%,
    #002141 112%
  );
}
.firstDiv {
  width: 1200px;
  height: 54px;
  display: flex;
  background-image: linear-gradient(
    270deg,
    rgba(0, 98, 162, 0) 0%,
    rgba(0, 98, 162, 0.7) 50%,
    rgba(0, 98, 162, 0) 100%
  );
}

.firstTitle {
  width: 90px;
  height: 25px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0 9px #0086ff;
  font-weight: 500;
  margin-top: 15px;
  margin-left: 30px;
  margin-bottom: 14px;
}
.close {
  width: 20px;
  height: 20px;
  border: 1px solid #0086ff;
  text-align: center;
  color: #0086ff;
  margin-top: 15px;
  margin-left: 1030px;
  margin-bottom: 14px;
  cursor: pointer;
}
.secondDiv {
  width: 1160px;
  height: 680px;
  background: rgba(0, 98, 162, 0);
  margin-top: 10px;
}
.green {
  width: 44px;
  height: 16px;
  background: #33bb5c;
  border-radius: 2px;
}
.red {
  width: 44px;
  height: 16px;
  background: #ca4a4a;
  border-radius: 2px;
}
.one {
  width: 1160px;
  height: 40px;
  background: rgba(0, 98, 162, 0.6);
  display: flex;
}
.one-1 {
  width: 28px;
  height: 20px;
  margin-top: 10px;
  margin-left: 30px;
}
.one-2 {
  width: 80px;
  height: 20px;
  margin-top: 10px;
  margin-left: 218px;
}
.one-3 {
  width: 42px;
  height: 20px;
  margin-left: 35px;
  margin-top: 10px;
}
.one-4 {
  width: 154px;
  height: 20px;
  margin-left: 10px;
  margin-top: 10px;
}
.cityFont {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  font-weight: 500;
}

.two {
  margin-left: -1160px;
  margin-top: 40px;
  display: flex;
  width: 1160px;
  height: 40px;
  background: rgba(0, 98, 162, 0);
  border: 1px solid #0062a2;
}
.third {
  margin-left: -1160px;
  margin-top: 80px;
  display: flex;
  width: 1160px;
  height: 40px;
  background: rgba(0, 98, 162, 0);
  border: 1px solid #0062a2;
}
.four {
  margin-left: -1160px;
  margin-top: 120px;
  display: flex;
  width: 1160px;
  height: 40px;
  background: rgba(0, 98, 162, 0);
  border: 1px solid #0062a2;
}
</style>
